<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>学掌门后台管理系统</title>
		<link rel="icon" href="favicon.ico">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/dashboard.css" rel="stylesheet">
		<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
		<script src="js/jquery-3.6.0.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.validate.js"></script>
		<script src="js/mock-min.js"></script>
		<script src="js/server.js"></script>
		<script src="js/ie-emulation-modes-warning.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/mapjson.js"></script>
		<script src="js/china.js"></script>
		<script type="text/javascript">
			/*
		       统计图表库
			   1.echarts.js
			   2.highcharts.js
			   
			   1.初始化echarts实例(容器dom)
			   2.配置项
			   3.实例设置配置项
			   4.设置主体
			   5.事件
			   
		   */
			$(document).ready(function() {
				$('.glyphicon').html(sessionStorage.getItem("nickname"));
				//柱状图
				let myChart1 = echarts.init(document.querySelector(".chart1"));
				// myChart1.on('click', function(params) {
				// 	console.log(params);
				// });
				// myChart1.on('click', 'series.bar', function (params) {
				//     console.log(params);
				// });

				myChart1.on('click', {
					seriesIndex: 1,
					name: '周二'
				}, function(params) {
					console.log(params);
				});

				let option1 = {
					//标题
					title: {
						text: "播放量",
						left: "left"
					},
					//图例组件
					legend: {

					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						show: false,
						left: '3%',
						//刻度
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
						axisLine: {
							show: true,
							lineStyle: {
								// color: '#ff00ff'
							}
						},
						axisTick: {
							show: true,
							alignWithLabel: true
						},
						axisLabel: {
							show: true,
							fontSize: 12
						},
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: true
						}
					},
					series: [{
							name: "抖音",
							data: [120, 200, 150, 80, 70, 110, 130],
							type: 'bar',
							itemStyle: {
								borderRadius: 5
							}
						},
						{
							name: "快手",
							data: [20, 100, 50, 80, 70, 10, 30],
							type: 'bar',
							itemStyle: {
								borderRadius: 5
							}
						}
					]
				};
				myChart1.setOption(option1);

				let myChart2 = echarts.init(document.querySelector(".chart2"));

				let option2 = {
					title: {
						text: '世界人口总量'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						right: "20%"
					},
					grid: {
						left: '3%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						axisTick: {
							alignWithLabel: true
						},
						axisLabel: {
							fontSize: 12
						}
					},
					yAxis: {
						type: 'category',
						data: ['巴西', '印尼', '美国', '印度', '中国']
					},
					series: [{
							name: '2011',
							type: 'bar',
							data: [18203, 23489, 29034, 104970, 131744]
						},
						{
							name: '2012',
							type: 'bar',
							data: [19325, 23438, 31000, 121594, 134141]
						}
					]
				};
				myChart2.setOption(option2);

				let myChart3 = echarts.init(document.querySelector(".chart3"));
				let option3 = {
					title: {
						text: '粉丝数'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						right: '20%'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['1月', '3月', '5月', '7月', '9月', '11月']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: '新增粉丝数',
							type: 'line',
							// stack: 'Total',
							data: [120, 132, 101, 134, 90, 230]
						},
						{
							name: '新增播放量',
							type: 'line',
							// stack: 'Total',
							data: [220, 182, 191, 234, 290, 330]
						}
					]
				};
				myChart3.setOption(option3);

				let myChart4 = echarts.init(document.querySelector(".chart4"));
				let option4 = {
					title: {
						text: "课程"
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						left: 'right'
					},
					series: [{
						name: '课程',
						type: 'pie',
						radius: ['50%', '90%'],
						avoidLabelOverlap: false,
						top: '20%',
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '20',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: true
						},
						data: [{
								value: 1048,
								name: 'HTML'
							},
							{
								value: 735,
								name: 'CSS'
							},
							{
								value: 580,
								name: 'JS'
							},
							{
								value: 484,
								name: 'JQUERY'
							},
							{
								value: 300,
								name: 'BOOTSTRAP'
							}
						]
					}]
				};
				myChart4.setOption(option4);

				let myChart5 = echarts.init(document.querySelector(".chart5"));
				let option5 = {
					title: {
						text: "德云社",
						show: false
					},
					legend: {
						left: 'right'
					},
					series: [{
						name: '德云社',
						type: 'pie',
						top: "20%",
						radius: ['30%', '90%'],
						center: ['50%', '50%'],
						roseType: 'radius',
						itemStyle: {
							borderRadius: 8
						},
						labelLine: {
							length: 5,
							length2: 7
						},
						data: [{
								value: 40,
								name: '郭德纲'
							},
							{
								value: 38,
								name: '于谦'
							},
							{
								value: 32,
								name: '岳云鹏'
							},
							{
								value: 30,
								name: '孙越'
							},
							{
								value: 50,
								name: '烧饼'
							},
							{
								value: 39,
								name: '张鹤伦'
							},
							{
								value: 60,
								name: '张云雷'
							}
						]
					}]
				};
				myChart5.setOption(option5);

				//散点图
				let myChart6 = echarts.init(document.querySelector(".chart6"));
				let option6 = {
					xAxis: {},
					yAxis: {},
					tooltip: {
						trigger: 'item'
					},
					series: [{
							symbol: 'rect',
							symbolSize: 10,
							data: [
								[10.0, 8.04],
								[8.07, 6.95],
								[13.0, 7.58],
								[9.05, 8.81],
								[11.0, 8.33],
								[14.0, 7.66],
								[13.4, 6.81],
								[10.0, 6.33],
								[14.0, 8.96],
								[12.5, 6.82],
								[9.15, 7.2],
								[11.5, 7.2],
								[3.03, 4.23],
								[12.2, 7.83],
								[2.02, 4.47],
								[1.05, 3.33],
								[4.05, 4.96],
								[6.03, 7.24],
								[12.0, 6.26],
								[12.0, 8.84],
								[7.08, 5.82],
								[5.02, 5.68]
							],
							type: 'scatter', //散点图
							itemStyle: {
								color: 'red'
							}
						},
						{
							type: 'effectScatter', //涟漪效果
							symbolSize: 50,
							rippleEffect: {
								number: 3, //波纹数量
								scale: 2.5
							},
							data: [
								[7.08, 5.82]
							]
						}
					]
				};
				myChart6.setOption(option6);

				//雷达图
				let myChart7 = echarts.init(document.querySelector(".chart7"));
				let option7 = {
					title: {
						text: '雷达图',
						show: true
					},
					legend: {},
					radar: {
						radius: '60%',
						// splitNumber: 1,//指示器轴的分割段数
						splitArea: {
							areaStyle: {
								// color: ['red', 'yellow', 'blue', 'green', 'yellow', 'blue']
								shadowColor: 'rgba(0, 0, 0, 0.1)',
							}
						},
						//雷达图指示器
						indicator: [{
								name: '销售',
								max: 6500
							},
							{
								name: '管理',
								max: 16000,
								color: 'red'
							}, // 标签设置为红色
							{
								name: '信息技术',
								max: 30000
							},
							{
								name: '客服',
								max: 38000
							},
							{
								name: '研发',
								max: 52000
							},
							{
								name: '市场',
								max: 25000
							}
						]
					},
					series: [{
						type: 'radar',
						data: [{
							name: "薪资",
							value: [4200, 3000, 20000, 35000, 50000, 18000],
						}, {
							name: "人数",
							value: [3200, 2000, 10000, 25000, 40000, 16000],
						}]
					}]
				};
				myChart7.setOption(option7);

				//树型图
				let myChart8 = echarts.init(document.querySelector(".chart8"));
				let treejson = {
					name: "ECMA",
					children: [{
						name: "ECMAScript",
						children: [{
								name: "变量",
								value: 12
							},
							{
								name: "语句",
								value: 22
							},
							{
								name: "数组",
								value: 32
							},
							{
								name: "函数",
								value: 52
							}

						]
					}]
				};
				let option8 = {
					tooltip: {
						trigger: 'item',
						triggerOn: 'mousemove'
					},
					series: [{
						type: 'tree',
						data: [treejson],
						symbolSize: 20,
						// orient: "BT", //布局方向
						label: {
							position: 'left',
							verticalAlign: 'middle',
							align: 'center',
							fontSize: 12
						},
						leaves: {
							label: {
								position: 'right',
								verticalAlign: 'middle',
								align: 'left'
							}
						},
						emphasis: {
							focus: 'descendant'
						},
						expandAndCollapse: true,
						animationDuration: 550,
						animationDurationUpdate: 750
					}]
				}
				myChart8.setOption(option8);

				let myChart9 = echarts.init(document.querySelector(".chart9"), "shine");
				/*
				1.http://datav.aliyun.com/portal/school/atlas/area_selectorx下载地图数据
				2.注册地图
				*/
				echarts.registerMap("chinaMap", mapjson);
				let option9 = {
					geo: {
						map: "chinaMap",
						roam: true,
						center: [104.076452, 30.651696],
						zoom: 1,
						itemStyle: {
							areaColor: 'rgba(85, 170, 255, 1.0)'
						}
					}
				}
				myChart9.setOption(option9);

				let myChart10 = echarts.init(document.querySelector(".chart10"));
				var option10 = {
					// backgroundColor: '#404a59',
					title: {
						text: '人口迁徙图',
						left: 'center',
						textStyle: {
							color: '#fff'
						}
					},
					legend: {
						show: false,
						orient: 'vertical',
						top: 'bottom',
						left: 'right',
						data: ['地点', '线路'],
						textStyle: {
							color: '#fff'
						}
					},
					geo: {
						map: 'china',
						label: {
							emphasis: {
								show: false
							}
						},
						roam: true,
						itemStyle: {
							normal: {
								areaColor: '#323c48',
								borderColor: '#404a59'
							},
							emphasis: {
								areaColor: '#2a333d'
							}
						}
					},
					series: [{
						name: '地点',
						type: 'effectScatter',
						coordinateSystem: 'geo',
						zlevel: 2,
						rippleEffect: {
							brushType: 'stroke'
						},
						label: {
							emphasis: {
								show: true,
								position: 'right',
								formatter: '{b}'
							}
						},
						symbolSize: 2,
						showEffectOn: 'render',
						itemStyle: {
							normal: {
								color: '#46bee9'
							}
						},
						data: allData.citys
					}, {
						name: '线路',
						type: 'lines',
						coordinateSystem: 'geo',
						zlevel: 2,
						large: true,
						effect: {
							show: true,
							constantSpeed: 30,
							symbol: 'pin',
							symbolSize: 3,
							trailLength: 0,
						},
						lineStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#58B3CC'
								}, {
									offset: 1,
									color: '#F58158'
								}], false),
								width: 1,
								opacity: 0.2,
								curveness: 0.1
							}
						},
						data: allData.moveLines
					}]
				};
				myChart10.setOption(option10);
			})
		</script>
		<style>
			div {
				height: 300px;
				width: 50%;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="chart1"></div>
		<div class="chart2"></div>
		<div class="chart3"></div>
		<div class="chart4"></div>
		<div class="chart5"></div>
		<div class="chart6"></div>
		<div class="chart7"></div>
		<div class="chart8"></div>
		<div class="chart9"></div>
		<div class="chart10"></div>
	</body>
</html>
